<script setup lang="ts">
import { getPartyAge, setPartyAge } from '@/service/api/sys/dataWarehouse/party'
import SvgIcon from '@/common/svg-icon/SvgIcon.vue'
import { ElMessage } from 'element-plus'
interface formType {
  year?: Number | String
  partyOrgId?: Number | String
  twentyToThirtyRatio?: Number | String
  createDtm?: Number | String
  thirtyToFortyRatio?: Number | String
  fortyToFiftyRatio?: Number | String
  updateDtm?: Number | String
  fiftyToSixtyRatio?: Number | String
  sixtyAboveRatio?: Number | String
}
const props = defineProps({
  filterRule: {
    type: Object,
    default: () =>
      ({
        partyOrgId: 1,
        year: 2023
      } as formType)
  }
})

const template = {
  year: 0,
  partyOrgId: 0,
  twentyToThirtyRatio: 0,
  createDtm: '',
  thirtyToFortyRatio: 0,
  fortyToFiftyRatio: 0,
  updateDtm: '',
  fiftyToSixtyRatio: 0,
  sixtyAboveRatio: 0
}
const form = ref<formType>({}) // 表单源
const disabled = ref(false) // 当前可编辑的状态: 可编辑 不可编辑

// 获取区域概况 更改当前编辑状态未不可编辑
const updateArea = async () => {
  const res = await getPartyAge(props.filterRule)
  form.value = res.data || Object.assign({}, template)
  disabled.value = false
}

// 监测传入的筛选条件改变, 获取数据
watch(
  () => props.filterRule,
  () => updateArea(),
  {
    immediate: true,
    deep: true
  }
)

// 更改编辑表单的内容, 利用div来做编辑的方法
const setForm = (field: string, val: any) => {
  const editType = form.value as { [k: string]: string | number }
  editType[field] = val
}

// 保存编辑
const changeDisabled = async () => {
  const editType = form.value as { [k: string]: string | number }
  console.log(props.filterRule)
  if (editType.partyOrgId > 0 && editType.year > 0) {
    // 保存
    if (disabled.value) {
      setPartyAge(form.value)
        .then(() => {
          ElMessage.success('修改成功!')
        })
        .catch(() => {
          ElMessage.error('修改失败!')
        })
      setTimeout(() => {
        updateArea()
      }, 500)
    }
    disabled.value = !disabled.value
  } else {
    ElMessage.warning('暂无数据, 无法编辑!')
  }
}
</script>

<template>
  <div class="warehouse">
    <div class="title">党龄分布</div>
    <div class="content grid grid-cols-3 gap-3.5 p-3.5">
      <div class="item">
        <div class="label">20-30岁</div>
        <div class="main">
          <div
            :contentEditable="disabled"
            v-text="form.twentyToThirtyRatio"
            @blur="setForm('twentyToThirtyRatio', $event.target.innerHTML)"
            class="text"
          />
          <span class="ml-1 text-[--auxiliary]">%</span>
        </div>
      </div>
      <div class="item">
        <div class="label">30-40岁</div>
        <div class="main">
          <div
            :contentEditable="disabled"
            v-text="form.thirtyToFortyRatio"
            @blur="setForm('thirtyToFortyRatio', $event.target.innerHTML)"
            class="text"
          />
          <span class="ml-1 text-[--auxiliary]">%</span>
        </div>
      </div>
      <div class="item">
        <div class="label">40-50岁</div>
        <div class="main">
          <div
            :contentEditable="disabled"
            v-text="form.fortyToFiftyRatio"
            @blur="setForm('fortyToFiftyRatio', $event.target.innerHTML)"
            class="text"
          />
          <span class="ml-1 text-[--auxiliary]">%</span>
        </div>
      </div>
      <div class="item">
        <div class="label">50-60岁</div>
        <div class="main">
          <div
            :contentEditable="disabled"
            v-text="form.fiftyToSixtyRatio"
            @blur="setForm('fiftyToSixtyRatio', $event.target.innerHTML)"
            class="text"
          />
          <span class="ml-1 text-[--auxiliary]">%</span>
        </div>
      </div>
      <div class="item">
        <div class="label">60岁以上</div>
        <div class="main">
          <div
            :contentEditable="disabled"
            v-text="form.sixtyAboveRatio"
            @blur="setForm('sixtyAboveRatio', $event.target.innerHTML)"
            class="text"
          />
          <span class="ml-1 text-[--auxiliary]">%</span>
        </div>
      </div>
    </div>
    <div class="footer">
      <el-link v-show="!disabled" :underline="false" @click="changeDisabled">
        <svg-icon name="icon-system-button-bianji" width="14px" height="12px" />
        <span class="text-[--theme]">编辑</span>
      </el-link>
      <el-button
        v-show="disabled"
        type="primary"
        class="button_function"
        @click="changeDisabled"
        size="small"
        >保存</el-button
      >
    </div>
  </div>
</template>

<style scoped></style>
